<template>
  <div>
    <div class="demo-inner-divider">checkbox</div>
    <div class="checkbox">
      <div>
        <p>可用</p>
        <e-checkbox
          label="可用"
          v-model="single"> </e-checkbox>
      </div>
      <div>
        <p>禁用</p>
        <e-checkbox
          label="禁用"
          disabled> </e-checkbox>
      </div>
    </div>
    <div class="demo-inner-divider">checkbox 组</div>
    <div class="checkbox">
      <div>
        <p>checkbox组</p>
        <e-checkbox
          :indeterminate="indeterminateFruit"
          v-model="checkAllFruit"
          @click.prevent="handleCheckAllFruit"
        >
          选择以下全部水果
        </e-checkbox>
        <e-checkbox
          :indeterminate="indeterminateFruit"
          v-model="checkAllFruit"
          disabled
        >
          选择以下全部水果
        </e-checkbox>
        <e-checkbox-group
          v-model="checkAllGroupFruit"
          @on-change="checkAllGroupChangeFruit"
        >
          <e-checkbox label="香蕉"> </e-checkbox>
          <e-checkbox label="苹果"></e-checkbox>
          <e-checkbox label="西瓜"></e-checkbox>
          <e-checkbox
            label="菠萝"
          > </e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="demo-inner-divider">checkbox按钮组-大中小</div>
    <div class="checkbox">
      <div>
        <span>标准: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          type="button"
          size="large"
        >
          <e-checkbox
            :indeterminate="indeterminate"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
            label="全部"
          >
          </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox
            label="已通过"
            disabled
          ></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="checkbox">
      <div>
        <span>中: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          type="button"
          size="middle"
        >
          <e-checkbox 
            label="全部"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
          > </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox
            label="已通过"
            disabled></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <div class="checkbox">
      <div>
        <span>小: </span>
        <e-checkbox-group
          v-model="checkAllGroup"
          @on-change="checkAllGroupChange"
          type="button"
          size="small"
        >
          <e-checkbox 
            label="全部"
            v-model="checkAll"
            @click.prevent="handleCheckAll"
          > </e-checkbox>
          <e-checkbox label="审批中"></e-checkbox>
          <e-checkbox
            label="已通过"
            disabled></e-checkbox>
          <e-checkbox label="未通过"> </e-checkbox>
          <e-checkbox label="已撤回"></e-checkbox>
        </e-checkbox-group>
      </div>
    </div>
    <checkbox-md class="markdown-body"></checkbox-md>
  </div>
</template>
<script>
import checkboxMd from '../../docs/checkbox.md'
export default {
  name: 'DemoCheckboxAndRadio',
  components: {
    checkboxMd,
  },
  data() {
    return {
      single: true,
      disabledSingle: true,
      indeterminate: false,
      checkAll: false,
      checkAllGroup: ['审批中','已通过'],
      indeterminateFruit: false,
      checkAllFruit: false,
      checkAllGroupFruit: ['香蕉'],
    }
  },
  methods: {
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false
      } else {
        this.checkAll = !this.checkAll
      }
      this.indeterminate = false

      if (this.checkAll) {
        this.checkAllGroup = [
          '全部',
          '已通过',
          '审批中',
          '未通过',
          '已撤回',
        ]
      } else {
        this.checkAllGroup = []
      }
    },
    checkAllGroupChange(data) {
      console.log(data);
      if (data.length === 4) {
        this.indeterminate = false
        this.checkAll = true
        console.log(this.checkAll);
      } else if (data.length > 0) {
        this.indeterminate = false
        this.checkAll = false
      } else {
        this.indeterminate = true
        this.checkAll = false
      }
    },
    handleCheckAllFruit() {
      if (this.indeterminateFruit) {
        this.checkAllFruitFruit = false
      } else {
        this.checkAllFruit = !this.checkAllFruit
      }
      this.indeterminateFruit = false

      if (this.checkAllFruit) {
        this.checkAllGroupFruit = ['香蕉', '苹果', '西瓜','菠萝']
      } else {
        this.checkAllGroupFruit = []
      }
    },
    checkAllGroupChangeFruit(data) {
      if (data.length === 4) {
        console.log(data)
        this.indeterminateFruit = false
        this.checkAllFruit = true
      } else if (data.length > 0) {
        this.indeterminateFruit = true
        this.checkAllFruit = false
      } else {
        this.indeterminateFruit = false
        this.checkAllFruit = false
      }
    },
  },
}
</script>
<style scoped>
.checkbox {
  display: flex;
  flex-direction: row;
  margin-bottom: 60px;
}
.checkbox > div {
  margin-right: 50px;
}
.checkbox p {
  font-size: 14px;
  font-family: MicrosoftYaHei;
  color: rgba(98, 54, 255, 1);
  margin-bottom: 10px;
}
</style>
